<template>
	<view style="height: 100%;background: white;">
		<view class="nav">
			<view class="flex_between" style="padding-left: 30%;">
				<view class="nav_title">
					<view :class="{'active':isActive==1}" @click="chenked(1)">
						公告
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==2}" @click="chenked(2)">
						系统
					</view>
				</view>
			</view>
		</view>
		<view v-if="isActive==1">
			<view class="nav_item" v-for="item, index in noticeList">
				<view style="display: flex;justify-content: space-between;">
					<view style="font-size: 14px;font-weight: bold;">{{item.noticeTitle}}</view>
					<view style="font-size: 12px;color: #999;padding-right: 3%;">{{item.createTime}}</view>
				</view>
				<view style="font-size: 12px;color: #999;padding-top: 10px;line-height: 20px;">
					<!-- <dl v-html="item.noticeContent|formatRichText"></dl> -->
					<rich-text class="info_detail" :nodes="item.noticeContent|formatRichText"></rich-text>
				</view>
			</view>
		</view>
		<view v-if="isActive==2">
			<view class="nav_item" v-for="item, index in informationList">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view>
						<view v-for="typeItem, index in bookTypes">
							<view style=" font-size: 12px;color: #999;padding-top: 10px;"
								v-if="typeItem.dictValue == item.approverState">
								{{item.infoContent}}审批{{typeItem.dictLabel}}
							</view>
						</view>
					</view>
					<view style="font-size: 12px;color: #999;padding-right: 3%;">{{item.createTime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listNotice
	} from '@/common/js/api/notice.js';
	import {
		getBook
	} from '@/common/js/api/bookRecord.js';
	import {
		getVisitorRecord
	} from '@/common/js/api/visitRecord.js';
	import {
		getDicts
	} from '@/common/js/api/dict/data.js';

	export default {
		data() {
			return {
				isActive: 1,
				//公告消息列表
				noticeList: [],
				//系统消息列表
				informationList: [],
				//当前用户基本信息
				userInfo: [],
				//当前系统时间
				date: '',
				//会议室审批状态字典
				bookTypes: [],
				//访客审批状态字典
				visitorTypes: [],
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.date = new Date().toISOString().slice(0, 10)
			this.listNoticeList()
			this.getVisitorList()
			this.listBookRecord()
			this.listDicts()
		},
		methods: {
			chenked(type) {
				this.isActive = type
			},
			//获取通知消息
			listNoticeList() {
				listNotice().then(res => {
					this.noticeList = res.rows
				})
			},
			//获取访客预约审批情况
			getVisitorList() {
				let openId = this.userInfo.openId
				getVisitorRecord(openId).then(res => {
					let newList = res.data
					let replaceList = JSON.parse(JSON.stringify(newList).replace(/visitComp/g, "infoContent"))
					for (let i in replaceList) {
						if (replaceList[i].approverState != 0) {
							this.informationList.push(replaceList[i])
						}
					}
				})
			},
			//获取会议室预定审批情况
			listBookRecord() {
				getBook(this.userInfo.staffPhone).then(res => {
					let newList = res.data
					let replaceList = JSON.parse(JSON.stringify(newList).replace(/broadroomName/g, "infoContent"))
					for (let i in replaceList) {
						if (replaceList[i].approverState != 0) {
							this.informationList.push(replaceList[i])
						}
					}
				})
			},
			listDicts() {
				getDicts("t_visitor_approverstate").then(res => {
					this.bookTypes = res.data
				})
				getDicts("t_pass_status").then(res => {
					this.visitorTypes = res.data
				})
			}
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.查找img标签有无style属性，如果没有，加上style
			 * 2.所有标签style后追加 max-width:100% !important;
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) { //控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					if (match.search(/style=/gi) == -1) {
						match = match
							.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
							.replace(/<p>/ig, '<p style="">')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)/ig,
								'<img style="width: 100%; border-radius: 8px;margin-bottom:10px;margin-top:15px" $1'
								)

					}
					return match;
				});

				return newContent;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		background: white;
	}

	.flex_between {
		display: flex;
	}

	.nav_title {
		width: 150upx;
		margin-top: 10px;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: "PingFang";
		font-weight: bold;
		color: #999;
	}

	.nav_item {
		margin: auto;
		width: 94%;
		border-bottom: 1px solid #eeeeee;
		background: white;
		padding-bottom: 10px;
		margin-top: 20px;
	}

	.active {
		position: relative;
		color: #1884eb;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 40rpx;
		border-radius: 10upx;
		height: 8rpx;
		background-color: #0a73d5;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;

	}
</style>
